<template>
    <div class="player" v-if="videoData">
        <Xgplayer ref="videoPlayer" :config="config"/>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import user from '@/api/user'
import Xgplayer from 'xgplayer-vue'

export default {
    props: ['videoData', 'isCurrent', 'index'],
    data () {
        return {
            config: {
                id: `vs_${this.videoData.id}`,
                url: this.videoData.video_url,
                'playsinline': true,
                'x5-video-player-type': 'h5',
                fluid: true,
                fitVideoSize: 'auto',
                controls: false,
                poster: this.videoData.thumb
            }
        }
    },
    components: {
        Xgplayer
    },
    computed: {
        ...mapGetters(['numberPlays']),
        player () {
            return this.$refs.videoPlayer.player
        }
    },
    mounted () {
        this.player.on('play', () => {
            if (this.numberPlays < 1) {
                this.$toast('免费观看次数已用完')
                this.player.pause()
            } else {
                this.playVideo()
            }
        })
        this.player.once('ready', () => {
            // console.log('ready')
        })
        // this.player.once('complete', () => {
        //   console.log('complete')
        // })
    },
    methods: {
        playVideo () {
            user.viewVideo()
        }
    },
    destroyed () {
        // this.player.destroy()
    },
    watch: {
        isCurrent (is) {
            if (!is) {
                if (this.player.hasStart) {
                    this.player.pause()
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.player {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    height: 100%;
}
</style>
